<template>
  <!-- <h5>setup 和 ref 的使用</h5>
 <RefStudy/> -->

 <!-- <h5>ReativeStudyVue 的使用</h5>
 <ReativeStudyVue/> -->

<!-- <h5>reactive基本使用</h5>
<ReactiveUse></ReactiveUse> -->

<!-- <h5>{{ msg }}</h5>
<button @click="msg+='==='">点击</button>
<ChildStudy :msg="msg" @xxx="xxx"></ChildStudy> -->

<!-- <h5>reactive 和ref 细节问题</h5>
<h5>m1:{{ m1 }}</h5>
<h5>m2:{{ m2 }}</h5>
<h5>m3:{{ m3 }}</h5>
<button @click="update">更新数据</button> -->

<!-- <JisuanShux></JisuanShux> -->

<!-- <h2>生命周期</h2>
<h5>App父级组件</h5>
<button @click="isShow=!isShow">切换显示</button>
<ShengmZhouqi v-if="isShow"></ShengmZhouqi> -->

<!-- <HookHanshu></HookHanshu> -->

<!-- <ToRefsUse></ToRefsUse> -->

<!-- <RefHuoyuan></RefHuoyuan> -->

<!-- <ShallowReactive></ShallowReactive> -->

<!-- <ShallowReadonly></ShallowReadonly> -->

<!-- <MarkRaw></MarkRaw> -->

<!-- <ToRef></ToRef> -->

<!-- <CustomRef></CustomRef> -->

<!-- <ProvideParent></ProvideParent> -->

<!-- <XiangYSpanduan></XiangYSpanduan> -->

<!-- <TeleportStu></TeleportStu> -->

<SuspenceStu></SuspenceStu>
</template>

<script lang="ts">
import { defineComponent, } from 'vue';
import {  ref,reactive} from 'vue';
// import ReativeStudyVue from './components/ReativeStudy.vue';
// import RefStudy from './components/RefStudy.vue'
// import ReactiveUse from './components/ReatctiveUse.vue'
// import ChildStudy from './components/Child.vue'
// import JisuanShux from './components/JisuanShux.vue'
// import ShengmZhouqi from './components/ShengmZhouqi.vue'
// import HookHanshu from './components/HookHanshu.vue'
// import ToRefsUse from './components/ToRefsUse.vue'
// import RefHuoyuan from './components/RefHuoyuan.vue'
// import ShallowReactive from './components/ShallowReactive.vue'
// import ShallowReadonly from './components/ShallowReadonly.vue'
// import MarkRaw from './components/MarkRaw.vue'
// import ToRef from './components/ToRef.vue'
// import CustomRef from './components/CustomRef.vue'
// import ProvideParent from './components/ProvideParent.vue'
// import XiangYSpanduan from './components/XiangYSpanduan.vue'
// import TeleportStu from './components/Teleport.vue'
import SuspenceStu from './components/SuspenceStu.vue'
export default defineComponent({
  name: 'App',
  components: {
    // RefStudy,
    // ReativeStudyVue,
    // ReactiveUse,
    // ChildStudy,
    // JisuanShux,
    // ShengmZhouqi,
    // HookHanshu,
    // ToRefsUse,
    // RefHuoyuan,
    // ShallowReactive,
    // ShallowReadonly,
    // MarkRaw,
    // ToRef,
    // CustomRef,
    // ProvideParent,
    // XiangYSpanduan,
    // TeleportStu,
    SuspenceStu
  },
  // 生命周期
  setup(){
    const isShow=ref(true)
    return{
      isShow
    }
  }




  // reactive 和 ref 细节问题
  // setup() {
  //   const m1=ref('abc')
  //   const m2=reactive({
  //     name:'jackson',
  //     wife:{
  //       name:'wangwangwang'
  //     }
  //   })
  //   const m3=ref({ //ref也可以传对象吗
  //     name:'jackson',
  //     wife:{
  //       name:'wangwangwang'
  //     }
  //   })
  //   const update = ()=>{  //更新数据
  //     m1.value+='===='
  //     m2.wife.name+='===='
  //     // m3.value.name+='====+'
  //     m3.value.wife.name+='===='
  //   }
  //     return{
  //       m1,m2,m3,update
  //     }
  // },




  // setup  细节问题
  // setup(){
  //   const msg = ref('what are you do ')  //定义一个ref类型的数据
  //   function xxx(txt:string){msg.value+=txt}
  //   return{
  //     msg,
  //     xxx
  //   }
  // }
  
});
</script>

<style>

</style>
